<template>
  <view class="employee-manage">
    <!-- 顶部标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 0 }" 
        @click="switchTab(0)"
      >
        在职
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 10 }" 
        @click="switchTab(10)"
      >
        申请离职
      </view>
      <view 
        class="tab-item" 
        :class="{ active: currentTab === 20 }" 
        @click="switchTab(20)"
      >
        离职
      </view>
    </view>

    <!-- 搜索框（可选） -->
   <!-- <view class="search-bar">
      <input 
        type="text" 
        placeholder="搜索姓名或岗位" 
        v-model="searchKeyword" 
        @input="handleSearch"
      />
    </view> -->
	<view class="search-bar">
	<u-search borderColor="#ffffff" :inputStyle='inputStyle' @input="handleSearch" :showAction='false' placeholder="搜索姓名或岗位" v-model="searchKeyword"></u-search>
	</view>

    <!-- 员工列表 -->
    <view class="table-header">
      <text class="header-item">姓名</text>
      <text class="header-item">岗位</text>
      <text class="header-item">入职日期</text>
	  <text class="header-item" v-if="currentTab == 20">离职日期</text>
      <text class="header-item" v-else>结算方式</text>
    </view>

    <view 
      class="table-row" 
      v-for="(item, index) in allEmployees" 
      :key="index"
    >
      <text class="row-item">{{ item.talentName }}</text>
      <text class="row-item">{{ item.postName }}</text>
      <text class="row-item">{{ item.entryDate }}</text>
	  <text class="row-item" v-if="currentTab == 20">{{ item.quitDate }}</text>
      <text class="row-item" v-else>{{ item.settlementType==0?'日结':'月结'}}</text>
    </view>
  </view>
</template>

<script>
	import {employeePage} from '@/api/talent/talent.js'
	import Loading from '@/components/loading/loading.vue'
export default {
	components: {
		Loading
	},
  data() {
    return {
		status: 'loadmore',
		inputStyle:{
			backGroundColor:"#ffffff"
		},
      // 当前激活的标签（0：在职，1：申请离职，2：离职）
      currentTab: 0,
      // 搜索关键词
      searchKeyword: '',
	  queryParams:{
		  pageNum:1,
		  pageSize:10,
		  talentName:'',
		  status:0
	  },
      // 模拟所有员工数据（可根据标签切换状态）
      allEmployees: [
        // { name: '张小刚', position: '操作工', entryDate: '2016-10-01', paymentMethod: '日结', status: 0 },
        // { name: '李小红', position: '操作工', entryDate: '2016-10-02', paymentMethod: '日结', status: 0 },
        // { name: '王小明', position: '操作工', entryDate: '2016-10-03', paymentMethod: '日结', status: 0 },
        // { name: '周小伟', position: '操作工', entryDate: '2016-10-04', paymentMethod: '日结', status: 0 },
        // { name: '郭小涛', position: '操作工', entryDate: '2016-10-05', paymentMethod: '日结', status: 0 },
        // { name: '张小刚', position: '搬运工', entryDate: '2016-10-01', paymentMethod: '月结', status: 0 },
        // { name: '李小红', position: '搬运工', entryDate: '2016-10-02', paymentMethod: '月结', status: 0 },
        // { name: '王小明', position: '搬运工', entryDate: '2016-10-03', paymentMethod: '月结', status: 0 },
        // { name: '周小伟', position: '搬运工', entryDate: '2016-10-04', paymentMethod: '月结', status: 0 },
        // { name: '郭小涛', position: '搬运工', entryDate: '2016-10-05', paymentMethod: '月结', status: 0 },
        // // 模拟申请离职数据
        // { name: '赵六', position: '质检员', entryDate: '2023-01-01', paymentMethod: '月结', status: 1 },
        // // 模拟离职数据
        // { name: '孙七', position: '司机', entryDate: '2022-06-01', paymentMethod: '日结', status: 2 },
      ]
    };
  },
  computed: {
    // 根据标签和搜索关键词过滤数据
    // filteredList() {
    //   return this.allEmployees.filter(item => {
    //     // 标签过滤
    //     if (item.status!== this.currentTab) return false;
    //     // 搜索过滤（不区分大小写）
    //     const keyword = this.searchKeyword.toLowerCase();
    //     return (
    //       item.name.toLowerCase().includes(keyword) ||
    //       item.position.toLowerCase().includes(keyword)
    //     );
    //   });
    // }
  },
  mounted() {
  	this.employeePage(this.queryParams)
  },
  methods: {
	  async employeePage(data){
		 let res = await employeePage(data)
		 console.log(res)
		 if (res.code == 200) {
		 	if(this.allEmployees.length < res.total){
		 		this.allEmployees=[...this.allEmployees,...res.rows]
		 	}else{
		 		this.status = "nomore"
		 	}
		 }
	  },
    // 切换标签
    switchTab(tabIndex) {
      this.currentTab = tabIndex;
	  this.queryParams.status = tabIndex
      this.searchKeyword = ''; // 切换标签时清空搜索
	  this.queryParams.talentName = ''
	  this.allEmployees = []
	  this.employeePage(this.queryParams)
    },
    // 搜索处理
    handleSearch() {
      // 可在此处优化搜索逻辑（如防抖）
	  this.queryParams.talentName = this.searchKeyword
	  this.allEmployees = []
	  this.employeePage(this.queryParams)
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.employee-manage {
  padding: 10px;
  background-color: #f5f5f5;
}

/* 标签栏样式 */
.tab-bar {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  color: #333;
}

.tab-item.active {
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
}

/* 搜索框样式 */
.search-bar {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20rpx 10rpx;
}


/* 表格标题样式 */
.table-header {
  display: flex;
  flex-direction: row;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  font-weight: bold;
}

.header-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-right: 1px solid #ddd;
}

.header-item:last-child {
  border-right: none;
}

/* 表格行样式 */
.table-row {
  display: flex;
  flex-direction: row;
  border: 1px solid #ddd;
  border-top: none;
  background-color: #fff;
}

.row-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-right: 1px solid #ddd;
}

.row-item:last-child {
  border-right: none;
}
</style>